<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>GraphQL IDE</title>
    <link href="css/vendor.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
    <style>
        *::selection {
            background: #E10098;
            color: #fff;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        .page-loader {
            display: block !important;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: visibility 0s ease-out 0.7s, opacity 0.7s ease-out 0.5s;
            -moz-transition: visibility 0s ease-out 0.7s, opacity 0.7s ease-out 0.5s;
            transition: visibility 0s ease-out 0.7s, opacity 0.7s ease-out 0.5s;
        }

        .page-loader .spinner {
            margin-top: -30px;
            margin-left: -200px;
            position: absolute;
            top: 50%;
            left: 50%;
            height: 60px;
            width: 400px;
            text-align: center;
        }

        .page-loader .spinner .spinner__icon {
            background-color: transparent;
            margin: 0 auto;
            font-size: 10px;
            text-indent: -9999em;
            border-top: 2px solid rgba(225, 0, 152, 0.5);
            border-right: 2px solid rgba(225, 0, 152, 0.2);
            border-bottom: 2px solid rgba(225, 0, 152, 0.2);
            border-left: 2px solid rgba(225, 0, 152, 0.2);
            -webkit-animation: loader 700ms infinite linear;
            animation: loader 700ms infinite linear;
        }

        .page-loader .spinner .spinner__icon,
        .page-loader .spinner .spinner__icon:after {
            border-radius: 50%;
            width: 34px;
            height: 34px;
            margin-bottom: 10px;
        }

        .page-loader .spinner .spinner__message {
            color: #E10098;
        }

        @-webkit-keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .page-loader.active {
            opacity: 1;
            visibility: visible;
        }
    </style>
<body>
<div id="root"></div>
<div id="app-loader" class="page-loader active">
    <div class="spinner">
        <div class="spinner__icon"></div>
        <div class="spinner__message">
            Initializing
        </div>
    </div>
</div>
</body>
<script src="dist/vendor.js"></script>
<script src="dist/app.js"></script>
</html>
